 <template>
  <div class="loginModule">
    <p class="loginM-title">您还没有成为我们的会员</p>
    <p class="loginM-text">欢迎注册成为会员查看内容</p>
    <van-cell-group :border="false">
      <van-field class="loginM-input-box" v-model="params.umobile" clearable placeholder="请输入用户名" />
      <van-field
        class="loginM-input-box"
        v-model="params.upasswd"
        :type="passwordtype"
        :right-icon="showpsd"
        @click-right-icon="clickEye"
        placeholder="请输入密码"
      />
    </van-cell-group>
    <a class="loginM-foget" :href="'tel:'+phoneNum">忘记密码？</a>
    <div class="loginItem" :class="{active:btnstatu}" @click="login">立即登录</div>
    <p class="loginM-register">
      还没有账号？
      <router-link class="a" to="/register">前往注册</router-link>
    </p>
  </div>
</template>

<script type="text/ecmascript-6">
import { getnewsDetail } from "../../api/sort";
import { login } from "../../api/user";
import utils from "../../assets/js/util";
import loginMinin from "../../mixin/login";
export default {
  mixins: [loginMinin],
  data() {
    return {
      phoneNum: this.$store.state.nocaches.kefuphone,
      showpsd: "closed-eye",
      passwordtype: "password",
      isLogin: false, //是否登录
      isClick: false, //防止多次点击
      btnstatus: false //不可点击
    };
  },
  computed: {
    btnstatu() {
      if (this.params.umobile != "" && this.params.upasswd != "") {
        this.btnstatus = true;
        return true;
      } else {
        this.btnstatus = false;
        return false;
      }
    }
  },
  inject: ["reload"],
  methods: {
    login() {
      if (!this.btnstatus) {
        this.$toast("手机号/密码不可以为空");
        return;
      }
      if (!utils.verifyPhone(this.params.umobile)) {
        this.$toast("请输入正确的手机号");
        return false;
      }
      if (!this.params.upasswd) {
        this.$toast("密码不可以为空");
        return false;
      }
      if (this.isClick) {
        return;
      }
      this.isClick = true;
      login(this.params).then(res => {
        this.isClick = false;
        if (res.code == "0000") {
          this.$store.commit("muLoginQuery", this.params);
          this.$store.dispatch("acLoginInfor", res.data);
          this.reload();
        } else {
          this.$toast(res.msg);
        }
      });
    },
    clickEye() {
      // 条件判断  ？ A(是) ： B(否)   并返回值
      //  this.showpsd = this.showpsd== "eye-o" ? 'closed-eye' :"eye-o";
      //    this.passwordtype = this.showpsd== "eye-o" ? 'closed-eye' :"eye-o";
      if (this.showpsd == "eye-o") {
        this.showpsd = "closed-eye";
        this.passwordtype = "password";
      } else {
        this.showpsd = "eye-o";
        this.passwordtype = "text";
      }
    }
  }
};
</script>
<style scoped lang="less">
.loginModule {
  padding: 0.2rem;
}
.loginM-input-box {
  //  height: 1.14rem;
  line-height: 1.5;
  border-bottom: 0.01rem solid rgba(222, 223, 223, 1);
  padding: 15px;
}
.loginM-title {
  font-size: 0.36rem;
  font-weight: bolder;
  color: rgba(228, 152, 41, 1);
  margin-bottom: 0.3rem;
}
.loginM-text {
  font-size: 0.26rem;
  margin-bottom: 0.16rem;
  color: rgba(110, 111, 117, 1);
}
.loginM-foget {
  display: block;
  font-size: 0.28rem;
  color: rgba(39, 41, 55, 1);
  text-align: right;
  margin: 0.4rem 0 0.6rem;
}
.loginItem {
  width: 6.3rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  margin: 0 auto;
  background: rgba(242, 243, 245, 1);
  border-radius: 0.08rem;
  color: rgba(131, 134, 133, 1);
  &.active {
    background: rgba(228, 152, 41, 1);
    color: #ffffff;
  }
}
.loginM-register {
  height: 1.1rem;
  line-height: 1.1rem;
  text-align: center;
  color: rgba(131, 134, 133, 1);
  .a {
    color: rgba(228, 152, 41, 1);
  }
}
</style>
